<template>
	<div class="inOutjianguan" ref='inOutjianguan'>
		<h2 class="titleSelf">{{thatYear}}年跨境进出口监管方式统计</h2>
		<div class="contentSelf">
			<div class="danwei">
				<span>占比：</span>
				<span>货值</span>
			</div>
			<div class="huozhiShow">
				<div class="huozhiShowList" v-for="item,index in huozhiZhanbi" :key='index'> 
					<div class="huozhigv">
						<span class="huozhigvName">{{item.name}}货值</span>
						<span class="huozhigvNum">{{commonFunction.formatNumberRgx((item.gv/10000).toFixed(0))}}</span>
						<span class="huozhigvDw">万元</span>
					</div> 
					<div class="huozhizhanbi">
						<span class="huozhizhanbiName">占比</span>
						<span class="huozhizhanbiNum">{{item.value}}%</span>
					</div>
				</div>
				
			</div>
			<div ref="inOutjianguanChart" class="inOutjianguanChart"></div>
		</div>

	</div>

</template>

<script>
	export default {
		name: 'inOutjianguan',
		components: {

		},
		data() {
			return {
				thatYear:new Date().getFullYear()-1,
				huozhiZhanbi:[]
			}
		},
		mounted() {

			var that = this;
			that.getEchartData()
			// setInterval(function() {
			// 	that.getEchartData()
			// }, 30000)


		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate() 
			// 获取明天that.commonFunction.getTomorrowDate();

			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy() 
			getEchartData() {
				const inOutjianguanChart = this.$refs.inOutjianguanChart;
				if (inOutjianguanChart) {
					const myChart = this.$echarts.init(inOutjianguanChart)
					var that = this;
					var startDate = that.commonFunction.getLastYearYestdy('Y')[0];
					that.$myHttp.get("getExportMonitorTypeInfo", {
						params: {
							start: startDate ,
							end: startDate+1,
							dtype: "Y"
						}
					}).then(function(data0) {
						if (data0.status == "200") {
							var trafficWay = [];
							var dataArr = data0.data.result.ExportMonitorTypeData;
							// console.log(dataArr)
							dataArr.forEach(function(d) {
								var dd = {
									name: d.stock_flag,
									value: (d.good_value_zhanbi * 100).toFixed("2"),
									gv:d.good_value
								};
								trafficWay.push(dd);
							});
							function sortValue(a, b) {
								return b.value - a.value
							}
							trafficWay.sort(sortValue);
							that.huozhiZhanbi = trafficWay;
							// console.log("data>>>"+ JSON.stringify(trafficWay));

							var img =
								'';
							var img1 =
								"";
							// console.log(img1)

							// var trafficWay = [{
							//   name: '1210',
							//   value: 20
							// }, {
							//   name: '9610',
							//   value: 10
							// }, {
							//   name: '9710',
							//   value: 30
							// }, {
							//   name: '9810',
							//   value: 40
							// }];

							var data = [];
							// var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00',
							// 	'#ff3000'
							// ]
							var color = ['#038de2', '#0cffeb',' #ff8448' ,'#d84746']
							
							for (var i = 0; i < trafficWay.length; i++) {
								data.push({
									value: trafficWay[i].value,
									name: trafficWay[i].name,
									itemStyle: {
										normal: {
											borderWidth: that.commonFunction.fontSize(0.05),
											shadowBlur: that.commonFunction.fontSize(0.2),
											borderColor: color[i],
											shadowColor: color[i]
										}
									}
								}, {
									value: 2,
									name: '',
									itemStyle: {
										normal: {
											label: {
												show: false
											},
											labelLine: {
												show: false
											},
											color: 'rgba(0, 0, 0, 0)',
											borderColor: 'rgba(0, 0, 0, 0)',
											borderWidth: 0
										}
									}
								});
							}
							var seriesOption = [{
								name: '',
								type: 'pie',
								minAngle: 20,
								startAngle: 120,
								clockWise: true,
								center: ['20%', '40%'],
								radius: [that.commonFunction.fontSize(0.5), that.commonFunction.fontSize(
									0.55)],
								hoverAnimation: false,
								itemStyle: {
									normal: {
										label: {
											show: false,
											position: 'outside',
											color: '#ddd',
											formatter: function(params) {
												var percent = 0;
												var total = 0;
												for (var i = 0; i < trafficWay.length; i++) {
													total += trafficWay[i].value;
												}
												percent = ((params.value / total) * 100).toFixed(0);
												if (params.name !== '') {
													return '交通方式：' + params.name + '\n' + '\n' +
														'占百分比：' + percent +
														'%';
												} else {
													return '';
												}
											},
										},
										labelLine: {
											length: that.commonFunction.fontSize(0.2),
											length2: that.commonFunction.fontSize(0.2),
											show: false,
											color: '#00ffff'
										}
									}
								},
								data: data
							}];
							const option = {
								color: color,
								title: {
									text: '',
									top: '48%',
									textAlign: "center",
									left: "29%",
									textStyle: {
										color: '#fff',
										fontSize: that.commonFunction.fontSize(0.18),
										fontWeight: '400'
									}
								},

								graphic: {
									elements: [{
										type: "image",
										z: 3,
										style: {
											image: img,
											width: that.commonFunction.fontSize(0.75),
											height: that.commonFunction.fontSize(0.75)
										},
										left: '12.2%',
										top: '20.8%',
										// position: [100, 100]
									}, {
										type: "image",
										z: 4,
										style: {
											image: img1,
											width: that.commonFunction.fontSize(0.25),
											height: that.commonFunction.fontSize(0.25)
										},
										left: '17%',
										top: '35%',
										// position: [100, 100]
									}]
								},
								tooltip: {
									show: false
								},
								legend: {
									orient: 'vertical',
									icon: "circle",
									orient: 'horizontal',
									 width:that.commonFunction.fontSize(1.6),
									// x: 'left',
									// data: ['1210', '9610', '9710', '9810'],
									left: '3%',
									bottom: '5%',
									align: 'left',
									"itemWidth": that.commonFunction.fontSize(0.1),
									"itemHeight": that.commonFunction.fontSize(0.1),
									itemGap: that.commonFunction.fontSize(0.1),
									data: trafficWay,
									formatter: (name) => {
										var text;
										trafficWay.forEach((item, index) => {
											// console.log(item)
											if (item.name == name) {
												if(item.name=="1210"){
													text = "{title|" + item.name + "进口}";
												}else{
													text = "{title|" + item.name + "出口}";
												}
												// console.log(item)
												
												// text = "{title|" + item.name + "}  {value|" + item
												// 	.value + "%}" + '{hzTxt|货值}' + '{hzNum|'+that.commonFunction.formatNumberRgx((parseFloat(item.gv)/10000).toFixed(0))+'}{wy|(万元)}';
												// console.log(text)
											}
										})
										return text;
									},
									textStyle: {
										rich: {
											title: {
												fontSize: that.commonFunction.fontSize(0.12),
												lineHeight: 0,
												color: "#07eee9"
											},
											value: {
												fontSize: that.commonFunction.fontSize(0.14),
												lineHeight: that.commonFunction.fontSize(0.2),
												color: "#fff",
												padding: [0, 0, 0, that.commonFunction.fontSize(0.05)],
												width:that.commonFunction.fontSize(0.6),
											},
											hzTxt:{
												fontSize: that.commonFunction.fontSize(0.12),
												color: "#07eee9",
												padding: [0, 0, 0, that.commonFunction.fontSize(0.05)],
											},
											hzNum:{
												fontSize: that.commonFunction.fontSize(0.14),
												color: "#fff",
												align:'left',
												padding: [0, 0, 0, that.commonFunction.fontSize(0.05)],
												width:that.commonFunction.fontSize(0.7),
											},
											wy:{
												fontSize: that.commonFunction.fontSize(0.1),
												color: "#07eee9",
												padding: [0, 0, 0, that.commonFunction.fontSize(0.05)],
											},
										}
									}
								},
								toolbox: {
									show: false
								},
								series: seriesOption
							}
							myChart.setOption(option)
							window.addEventListener("resize", function() {
								myChart.resize()
							})

						} else {
							alert("数据请求错误")
						}

					}).catch(function(error) {
						alert(error)
					});
				}
			}
		}
	}
</script>

<style scoped>
	.inOutjianguan {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		
	}
	.contentSelf{
		width: 100%;
		height: 100%;
		position: relative;
	}
	
.danwei{
		position: absolute;
		top: 0;
		right: 10%;
		display: flex;
		align-items: center;
		color:#07eee9 ;
		font-size: .14rem;
	}
	.inOutjianguanChart {
		width: 100%;
		height: 100%;
	}
	.huozhiShow{
		position: absolute;
		right: 0;
		bottom: .25rem;
	}
	.huozhiShowList{
		display: flex;
		align-items: center;
		margin-bottom: 0.08rem;
	}
	.huozhigv {
		display: flex;
		align-items: center;
	}
	.huozhigvName  {
		
		color: #07EEE9;
		font-size: .14rem;
		width: .8rem;
	}
	.huozhigvNum {
		color: #fff;
		font-size: .14rem;
		min-width: .8rem;
	}
	.huozhigvDw {
		color:  #07EEE9;
		font-size: .12rem;
		margin-left: .05rem;
	}
	.huozhizhanbi{
		display: flex;
		align-items: center;
		margin-left: .1rem;
	}
	.huozhizhanbiName {
		color: #07EEE9;
		font-size: .14rem;
		width: .4rem;
	}
	.huozhizhanbiNum{
		color: #fff;
		font-size: .14rem;
		width: .5rem;
	}
</style>
